<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>排行榜</title>
  <link rel="stylesheet" href="styles/icon.css">
  <link rel="stylesheet" href="styles/style.css">
</head>

<body>
  <div class="page">
    <header class="top">
      <div class="top-title">排行榜</div>
      <nav class="tabs">
        <ul>
          <li class="tab-item tab-active"><img src="imgs/icon_article.webp" class="icon-article">好文精选</li>
          <li class="tab-item"><img src="imgs/icon_hot.webp" class="icon-hot">热门资讯</li>
        </ul>
      </nav>
      <nav class="cats">
        <ul class="cat-list">
          <li class="cat-item cat-active">文章</li>
        </ul>
      </nav>
    </header>
    <main class="list">
      <a href="#" class="sku">
        <div class="content">
          <div class="cover">
            <img src="imgs/iptv.png" class="cover-img" />
            <img src="imgs/rank-top1.png" class="cover-rank" />
          </div>
          <div class="comment">
            <h1><strong>安卓电视通过 KODI 看IPTV</strong></h1>
          </div>
          <div class="desc">
            <i class="iconfont icon-comment"></i>
            <span class="desc-number">53</span>
            <i class="iconfont icon-zhi"></i>
            <span class="desc-number">23%</span>
          </div>
          <a href="#" class="sku">
            <div class="content">
              <div class="cover">
                <img src="imgs/屏幕截图 2024-11-03 173740.png" class="cover-img" />
                <img src="imgs/rank-top2.png" class="cover-rank" />
              </div>
              <div class="comment">
            <h1><strong>起跑线 26 期： 5km跑步，你到了哪一级别？学会这几个跑步技巧，助你提升PB</strong></h1>
            <div class="tag"># 跑者</div>
          </div>
                <div class="desc">
                  <i class="iconfont icon-comment"></i>
                  <span class="desc-number">53</span>
                  <i class="iconfont icon-zhi"></i>
                  <span class="desc-number">23%</span>
            </div>
          </a>
          <a href="#" class="sku">
            <div class="content">
              <div class="cover">
                <img src="imgs/1me6q12000bkcaqi9CCFC_W_800_0_Q90_edit_1150068867.jpg" class="cover-img" />
                <img src="imgs/rank-top3.png" class="cover-rank" />
              </div>
              <div class="comment">
            <h1><strong>我爱玩原神</strong></h1>
            </div>
                <div class="desc">
                  <i class="iconfont icon-comment"></i>
                  <span class="desc-number">17</span>
                  <i class="iconfont icon-zhi"></i>
                  <span class="desc-number">86%</span>
            </div>
          </a>
    </main>
  </div>
</body>

</html>